<template>
  <transition name="message" @after-leave="destroyCom">
    <div v-if="visible" class="message-border"
    :class="[type, {
      center
    }]"
    :style="{ top: top + 'px' }">
      <svg v-if="type === 'info'" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
        <path fill="rgb(144, 147, 153)"
          d="M14 7v2h-1v6h1v2h-4v-2h1V9h-1V7zm-2-5a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8" />
      </svg>
      <svg v-if="type === 'success'" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
        <path fill="rgb(103, 194, 92)"
          d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4l8-8z" />
      </svg>
      <svg v-if="type === 'warning'" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
        <path fill="currentColor"
          d="M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8a8 8 0 0 1 8-8a8 8 0 0 1 8 8a8 8 0 0 1-8 8" />
      </svg>
      <svg v-if="type === 'error'" xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24">
        <path fill="currentColor"
          d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m2.59 6L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41z" />
      </svg>
      <span>{{ tittle }}</span>
    </div>
  </transition>
</template>

<script>
import api from '@/api/axios.js'

export default {
  data() {
    return {
      visible: false,
      top: null,
      onClose: null,
    }
  },
  props: {
    msgid: {
      type: String,
      default: ''
    },
    tittle: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'info'
    },
    duration: {
      type: Number,
      default: 3000
    },
    center: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  watch: {
    visible(newValue, oldValue) {
      if (!newValue) {
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.visible = false
    }, this.duration)
  },
  methods: {
    destroyCom() {
      if (typeof (this.onClose) === 'function') {
        this.onClose(this.msgid)
      }
      this.$el.parentNode.removeChild(this.$el)
    }
  },
  destroyed(){
    // console.log("被销毁了")
  }
}
</script>

<style>
.message-border {
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 1000;
  width: 380px;
  height: 48px;
  padding: 0 25px;
  border-radius: 5px;
  left: 50%;
  transform: translateX(-50%);
  transition: all .3s;
}
.info {
  background-color: rgb(237, 242, 252);
  color: rgb(144, 147, 153);
}
.success {
  background-color: rgb(240, 249, 235);
  color: rgb(103, 194, 92);
}
.warning {
  background-color: rgb(253, 246, 236);
  color: rgb(230, 162, 60);
}
.error {
  background-color: rgb(254, 240, 240);
  color: rgb(245, 108, 108);
}
.center {
  justify-content: center;
}
.message-border svg {
  margin-top: 1px;
  margin-right: 10px;
}
.message-border span {
  font-size: 14px;
}

.message-enter-from,
.message-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%)
}
</style>